<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" label-width="160px">
			<el-form-item label="选择商品：">
				<section @click="selectGoods()">
					<el-image v-if="storeSeckillGoods.seckillImage"
						style="width:64px; height: 64px;border-radius: 5px;" :src="storeSeckillGoods.seckillImage" fit="cover" />
					<section v-else class="selector-img">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
				</section>
			</el-form-item>
		</el-form>
		<goodSelectDialog :isMultiSelect="false" @goodsSubmitFun="goodsSubmitFun" ref="goodSelectDialogRef" />
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { ref, defineAsyncComponent, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { useAddSeckillGoods } from '@/stores/addSeckillGoods'
import { getGoodsInfosByIds } from '/@/api/marketing';
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/newGoodsSelects.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['updateGoodsData']);
const props = defineProps({
	// 是否多选
	goodsData: {
		type: Object,
		default: () => {},
	},
});
const storeSeckillGoods = useAddSeckillGoods();
// 图片选中
const selectGoods = () => {
	goodSelectDialogRef.value.openDialog(null);
}
interface Goods{
	dictType:string,
	setSpuId:number,
	setSkuId:number,
	goodsType:number,
}
interface GoodsObj {
	dictType:string,
	addGoods:Goods[]
}
const checkGoods = reactive<GoodsObj>({
	dictType:'',
	addGoods:[]
})
// 选中关联商品
const goodsSubmitFun = (list: any, type : any) => {
	const t = new Date().getTime() + '';
	checkGoods.dictType = t;
	list.forEach((item:any) => {
		checkGoods.addGoods.push({
			dictType:t,
			setSpuId:Number(item.spuId),
			setSkuId:Number(item.skuId),
			goodsType:Number(type)
		})
	})
	getGoodsInfosByIds(checkGoods).then((res : any) => {
		const obj = res.results.records[0];
		console.log(obj)
		// imgOnlineArr  Spu轮播图片数组
		// Number(item.data.retailPrice)
		const arr = obj.skuList.map((item:any) => {
			return {
				price : Number(item.data.retailPrice),
				quota : Number(item.data.stock ? item.data.stock : 100),
				isSelected : 0,
				skuId : item.data.skuId,
				skuImgUrl : item.data.imgUrl,
				skuTypeName : item.data.skuTypeName,
				skuSerialName:item.data.skuSerialName,
				retailPrice:item.data.retailPrice,
				lowPrice:item.data.lowPrice,
				costPrice:item.data.costPrice,
				stock:item.data.stock,
			}
		});
		storeSeckillGoods.$patch({
			seckillProductId:obj.data.spuId,
			seckillImage:obj.data.imgUrl,//商品主图
			seckillImages:obj.data.imgOnlineArr,//轮播图
			seckillTitle:obj.data.title,//活动标题
			productInfos:arr.slice()
		})
	})
}
</script>

<style lang="scss" scoped>
.base-info-content {
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.typeBox{
		height: 65px;
		margin-right: 15px;
		border: 1px solid var(--el-border-color-light, #ebeef5);
		line-height: 24px;
		box-sizing: border-box;
		cursor: pointer;
		span:first-child{
			font-weight: 600;
		}
		span:last-child{
			font-weight: 500;
			color: var(--el-color-info-light-3);
		}
	}
	.typeBoxSelected {
		border: 1px solid var(--el-color-primary);
		position: relative;
		.virtual_san{
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 26px solid var(--el-color-primary);
			border-left: 26px solid transparent;
		}
		.virtual_dui{
			position: absolute;
			bottom: -2px;
			right: 2px;
			color: #fff;
			font-family: system-ui;
		}
	}
}


</style>
